<template>
  <div class="app-container">
    <!-- 顶部 -->
    <el-row
      :gutter="24"
      class="el-btn"
      style="margin-bottom:15px"
    >
      <el-col :span="12">
        <el-button
          type="primary"
          @click="dialog = true"
        >新增</el-button>
        <el-button
          type="danger"
          @click="onRemove"
        >批量删除</el-button>
      </el-col>
      <el-col :span="12">
        <el-input
          placeholder="请输入内容"
          v-model="input"
          class="input-with-select"
        >
          <!-- <el-select
            v-model="select"
            slot="prepend"
            placeholder="请选择"
          >
            <el-option
              label="标题"
              value="title"
            ></el-option>
            <el-option
              label="内容"
              value="content"
            ></el-option>
            <el-option
              label="类型"
              value="classify"
            ></el-option>
          </el-select> -->
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="onSearch"
          ></el-button>
        </el-input>
      </el-col>
    </el-row>

    <!-- 表格 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      max-height="450"
      :border="true"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        fixed
        type="selection"
        width="60"
        align="center"
      >
      </el-table-column>
      <el-table-column
        fixed
        type="index"
        label="序号"
        width="60"
        :resizable="false"
        align="center"
        sortable
      >
      </el-table-column>
      <el-table-column
        prop="title"
        label="标题"
        width="300"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="content"
        label="内容"
        width="360"
        align="center"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        prop="author"
        label="作者"
        width="160"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="date"
        label="时间"
        width="240"
        align="center"
        sortable
      >
      </el-table-column>
      <el-table-column
        prop="type"
        label="类型"
        width="66"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="time"
        label="学时"
        width="66"
        align="center"
        sortable
      >
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="150"
        align="center"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="middle"
            @click="onLook(scope.row)"
          >
            详情
          </el-button>
          <el-button
            type="text"
            size="middle"
            @click="onEdit(scope.row)"
          >
            修改
          </el-button>
          <el-button
            @click="deleteRow(scope.row.id)"
            type="text"
            size="middle"
          >
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      style="margin-top:26px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="1"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <!-- 抽屉 -->
    <el-drawer
      :title="title"
      :before-close="handleClose"
      :visible.sync="dialog"
      direction="ltr"
      custom-class="demo-drawer"
      ref="drawer"
      size="60%"
      :show-close="false"
    >
      <div class="demo-drawer__content">
        <el-form
          :model="form"
          :disabled="look"
        >
          <el-form-item
            label="标题："
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="form.title"
              placeholder="请填写标题"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="作者："
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="form.author"
              placeholder="请输入作者"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="时间："
            :label-width="formLabelWidth"
          >
            <el-select
              v-model="form.time"
              placeholder="请选择学时"
            >
              <el-option
                label="1分钟"
                value="1"
              ></el-option>
              <el-option
                label="2分钟"
                value="2"
              ></el-option>
              <el-option
                label="3分钟"
                value="3"
              ></el-option>
              <el-option
                label="5分钟"
                value="5"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            label="类型："
            :label-width="formLabelWidth"
          >
            <el-select
              v-model="form.cid"
              placeholder="请选择类型"
            >
              <el-option
                v-for="(item,index) in classify"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            label="内容："
            :label-width="formLabelWidth"
          >
            <mavonEditor
              style="max-height:100px"
              scrollStyle
              v-model="form.content"
            />
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm">取消</el-button>
          <el-button
            v-if="!look"
            type="primary"
            @click="$refs.drawer.closeDrawer()"
            :loading="loading"
          >{{ loading ? '提交中 ...' : '确 定' }}</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";
import { mapActions, mapMutations, mapState } from "vuex";

export default {
  data() {
    return {
      input: "",
      select: "",
      title: "新增系统页面",
      form: {},
      dialog: false, // 打开抽屉
      loading: false,
      formLabelWidth: "80px",
      timer: null, // loading
      look: false, // 详情
      isEdit: false, // 新增 or 修改
      ids: [],
    };
  },
  async mounted() {
    await this.getTableData();
  },
  methods: {
    ...mapActions("msbd", [
      "getTableData",
      "saveFormList",
      "removeList",
      "updateList",
    ]),
    ...mapMutations("msbd", ["SET_PAGE", "SET_SIZE", "SET_SEARCH", "SET_SORT"]),

    // 多选
    handleSelectionChange(arr) {
      this.ids = arr.map((v) => {
        return v.id;
      });
    },

    // 修改
    onEdit(data) {
      this.isEdit = true;
      this.form = { ...data };
      this.title = "修改系统页面";
      this.dialog = true;
      console.log(data);
    },
    // 详情
    onLook(data) {
      this.title = "详情查看页面";
      this.look = true;
      this.form = data;
      this.dialog = true;
    },
    // 移除
    deleteRow(id) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.removeList(id);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    // 批量删除
    onRemove() {
      if (this.ids.length == 0) {
        this.$message({
          message: "请至少选择一项进行删除！不然就别点！",
          type: "error",
        });
        return;
      }
      this.$confirm("该操作将永久删除选中数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.removeList(this.ids.join(","));
          this.$message({
            type: "success",
            message: "已成功删除!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作！",
          });
        });
    },

    // 分页
    handleSizeChange(val) {
      this.SET_SIZE(val);
      this.getTableData();
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.SET_PAGE(val);
      this.getTableData();
      // console.log(`当前页: ${val}`);
    },

    // 搜索
    onSearch() {
      this.SET_SEARCH(this.input);
      this.getTableData();
      // this.getSearch({ searchVal: this.input, by: this.select, order: "desc" });
    },

    // 抽屉
    handleClose(done) {
      if (this.loading) {
        return;
      }
      if (this.look) {
        this.cancelForm();
      } else {
        this.$confirm("确定要提交表单吗？")
          .then((_) => {
            if (this.isEdit) {
              this.updateList(this.form);
              this.$message({
                message: "您已修改成功",
                type: "success",
              });
            } else {
              this.saveFormList(this.form);
              this.$message({
                message: "您已增加成功",
                type: "success",
              });
            }
            this.loading = true;
            this.timer = setTimeout(() => {
              done();
              // 动画关闭需要一定的时间
              setTimeout(() => {
                this.loading = false;
              }, 400);
            }, 1200);
          })
          .catch((_) => {});
      }
    },
    cancelForm() {
      this.look = false;
      this.loading = false;
      this.dialog = false;
      this.form = {};
      this.isEdit = false;
      clearTimeout(this.timer);
    },
    closeDrawer() {},
  },
  computed: {
    ...mapState("msbd", ["tableData", "classify", "total"]),
  },
  components: {
    mavonEditor,
  },
};
</script>

<style scoped>
.el-table_1_column_4 > .cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.el-input-group__prepend,
.el-select,
.el-select--medium {
  width: 100px;
}

.demo-drawer__footer {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.el-select,
.el-input__inner {
  width: 120px;
}
</style>
<style>
.el-drawer__header > span {
  outline: none !important;
  border: 0 !important;
}
</style>